<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Non-element Selectors Module Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="NOTE" name="w3c-status">
  <meta content="Non-element Selectors extends [[!SELECTORS4]] and allow selecting other kinds of document nodes than elements. This is useful when selectors are used as a general document query language.  Non-element Selectors are not intended to be used in CSS, but only as a separate query language in other host environments." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-WG-NOTE" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/selectors-nonelement-1/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Non-element Selectors Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Working Group Note, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://www.w3.org/TR/1970/NOTE-selectors-nonelement-1-19700101/">https://www.w3.org/TR/1970/NOTE-selectors-nonelement-1-19700101/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/selectors-nonelement-1/">https://www.w3.org/TR/selectors-nonelement-1/</a>
     <dt>Editor's Draft:
     <dd><a href="https://drafts.csswg.org/selectors-nonelement/">https://drafts.csswg.org/selectors-nonelement/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2014/WD-selectors-nonelement-1-20140603/" rel="prev">https://www.w3.org/TR/2014/WD-selectors-nonelement-1-20140603/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="40111"><a class="p-name fn u-email email" href="mailto:jirka@kosek.cz">Jirka Kosek</a> (<span class="p-org org">Invited Expert</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
     <dt>Suggest an Edit for this Spec:
     <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/selectors-nonelement-1/Overview.bs">GitHub Editor</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/csswg-drafts/labels/selectors-nonelement-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Non-element Selectors extends <a data-link-type="biblio" href="#biblio-selectors4">[SELECTORS4]</a> and allow selecting other kinds of document nodes than elements. This is useful when selectors are used as a general document query language.

Non-element Selectors are not intended to be used in CSS, but only as a separate query language in other host environments.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="https://www.w3.org/TR/">W3C technical reports
   index at https://www.w3.org/TR/.</a></em> </p>
   <p>Publication as a Working Group Note does not imply endorsement by the 
    W3C Membership. This is a draft document and may be updated, replaced or 
    obsoleted by other documents at any time. It is inappropriate to cite this 
    document as other than work in progress. </p>
   <p><a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
    When filing an issue, please put the text “selectors-nonelement” in the title,
    preferably like this:
    “[selectors-nonelement] <i data-lt>…summary of comment…</i>”.
    All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
    and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p data-deliverer="32061">This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p>This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>. </p>
   <p>This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>.</p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
    <li>
     <a href="#non-element-selectors"><span class="secno">2</span> <span class="content"> Non-element Selectors</span></a>
     <ol class="toc">
      <li><a href="#attribute-node-selectors"><span class="secno">2.1</span> <span class="content"> Attribute node selector</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>Selectors are a very popular mechanism for selecting things in HTML and XML content.
	They are not used only in CSS <a data-link-type="biblio" href="#biblio-css3syn">[CSS3SYN]</a> but also as a standalone query language in libraries like <a href="http://jquery.com/">jQuery</a>,
	in newer standardized browser APIs like <a data-link-type="biblio" href="#biblio-selectors-api">[SELECTORS-API]</a> and in other Web standards like <a href="https://www.w3.org/TR/its20/">ITS 2.0</a>.</p>
   <p>The <a data-link-type="biblio" href="#biblio-selectors4">[SELECTORS4]</a> specification only defines selectors for selecting element nodes from the document,
	but some uses of Selectors would like to select other types of nodes as well.
	This specification extends <span>[SELECTORS4]</span> with additional selectors
	that can be used for selecting non-element nodes in a document tree.</p>
   <p class="note" role="note"><span>Note:</span> Currently the draft only defines means for selecting and matching attribute nodes,
	but other kinds of nodes, such as comments or processing instructions, might be supported in the future.</p>
   <h2 class="heading settled" data-level="2" id="non-element-selectors"><span class="secno">2. </span><span class="content"> Non-element Selectors</span><a class="self-link" href="#non-element-selectors"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="attribute-node-selectors"><span class="secno">2.1. </span><span class="content"> Attribute node selector</span><a class="self-link" href="#attribute-node-selectors"></a></h3>
   <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="attribute-node-selector">attribute node selector</dfn> represents an attribute node in a document tree.
	Its syntax is:</p>
<pre class="prod"><dfn data-dfn-type="selector" data-export id="selectordef-attr">::attr()<a class="self-link" href="#selectordef-attr"></a></dfn> = ::attr( <a class="production" data-link-type="type" href="#typedef-namespace-attr" id="ref-for-typedef-namespace-attr">&lt;namespace-attr></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> )
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-namespace-attr">&lt;namespace-attr></dfn> = [ <a class="production" data-link-type="type" href="#typedef-na-prefix" id="ref-for-typedef-na-prefix">&lt;na-prefix></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> '|' ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> <a class="production" data-link-type="type" href="#typedef-na-name" id="ref-for-typedef-na-name">&lt;na-name></a>
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-na-prefix">&lt;na-prefix></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-ident" id="ref-for-typedef-ident">&lt;ident></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> '*'
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-na-name">&lt;na-name></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-ident" id="ref-for-typedef-ident①">&lt;ident></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> '*'
</pre>
   <p>No whitespace is allowed between the tokens of <a class="production css" data-link-type="type" href="#typedef-namespace-attr" id="ref-for-typedef-namespace-attr①">&lt;namespace-attr></a>.</p>
   <p><a class="production css" data-link-type="type" href="#typedef-namespace-attr" id="ref-for-typedef-namespace-attr②">&lt;namespace-attr></a> is divided into two halves:
	an optional prefix preceding a '|' character,
	and an attribute name following it.</p>
   <p>If the <a class="production css" data-link-type="type" href="#typedef-na-prefix" id="ref-for-typedef-na-prefix①">&lt;na-prefix></a> is provided as an <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-ident" id="ref-for-typedef-ident②">&lt;ident></a>,
	it must match a declared <a data-link-type="dfn" href="https://www.w3.org/TR/css-namespaces-3/#namespace-prefix" id="ref-for-namespace-prefix">namespace prefix</a>,
	in which case the selector only matches attributes in that namespace;
	if it doesn’t match a declared <span id="ref-for-namespace-prefix①">namespace prefix</span>,
	the selector matches nothing.
	If the <span class="production" id="ref-for-typedef-na-prefix②">&lt;na-prefix></span> is provided as a <a class="property" data-link-type="propdesc">*</a> character,
	the selector matches attributes in any namespace.
	If the <span class="production" id="ref-for-typedef-na-prefix③">&lt;na-prefix></span> is omitted,
	the selector only matches attributes in no namespace.</p>
   <p>If the <a class="production css" data-link-type="type" href="#typedef-na-name" id="ref-for-typedef-na-name①">&lt;na-name></a> is an <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-ident" id="ref-for-typedef-ident③">&lt;ident></a>,
	the selector matches attributes with that name.
	If the <span class="production" id="ref-for-typedef-na-name②">&lt;na-name></span> is a <a class="property" data-link-type="propdesc">*</a> character,
	the selector matches attributes with any name.</p>
   <p>If the <a class="production css" data-link-type="type" href="#typedef-namespace-attr" id="ref-for-typedef-namespace-attr③">&lt;namespace-attr></a> is omitted entirely,
	the selector matches any attribute in any namespace.</p>
   <p>The selector matches an attribute node with the given namespace and name on the <a data-link-type="dfn" href="https://www.w3.org/TR/selectors4/#originating-element" id="ref-for-originating-element">originating element</a>,
	if such an attribute exists.</p>
   <p>The selector uses <a data-link-type="dfn" href="https://www.w3.org/TR/selectors4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a> syntax.</p>
   <div class="example" id="example-18ff9212">
    <a class="self-link" href="#example-18ff9212"></a> The following ITS rules use an attribute node selector
		to switch off translatability of <code>title</code> attribute on <code>abbr</code> elements. 
<pre>&lt;rules xmlns="http://www.w3.org/2005/11/its"
       version="2.0"
       queryLanguage="css">
  &lt;translateRule selector="abbr::attr(title)" translate="no"/>
&lt;/rules>
</pre>
   </div>
   <p>Although entirely valid in Selectors used in the scope of CSS, <a data-link-type="dfn" href="#attribute-node-selector" id="ref-for-attribute-node-selector">attribute node selectors</a> never generate boxes.</p>
  </main>
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#selectordef-attr">::attr()</a><span>, in §2.1</span>
   <li><a href="#attribute-node-selector">attribute node selector</a><span>, in §2.1</span>
   <li><a href="#typedef-namespace-attr">&lt;namespace-attr></a><span>, in §2.1</span>
   <li><a href="#typedef-na-name">&lt;na-name></a><span>, in §2.1</span>
   <li><a href="#typedef-na-prefix">&lt;na-prefix></a><span>, in §2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-namespace-prefix">
   <a href="https://www.w3.org/TR/css-namespaces-3/#namespace-prefix">https://www.w3.org/TR/css-namespaces-3/#namespace-prefix</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-namespace-prefix">2.1. 
Attribute node selector</a> <a href="#ref-for-namespace-prefix①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-ident">
   <a href="https://www.w3.org/TR/css-values-4/#typedef-ident">https://www.w3.org/TR/css-values-4/#typedef-ident</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-ident">2.1. 
Attribute node selector</a> <a href="#ref-for-typedef-ident①">(2)</a> <a href="#ref-for-typedef-ident②">(3)</a> <a href="#ref-for-typedef-ident③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://www.w3.org/TR/css-values-4/#mult-opt">https://www.w3.org/TR/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">2.1. 
Attribute node selector</a> <a href="#ref-for-mult-opt①">(2)</a> <a href="#ref-for-mult-opt②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://www.w3.org/TR/css-values-4/#comb-one">https://www.w3.org/TR/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2.1. 
Attribute node selector</a> <a href="#ref-for-comb-one①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-originating-element">
   <a href="https://www.w3.org/TR/selectors4/#originating-element">https://www.w3.org/TR/selectors4/#originating-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-originating-element">2.1. 
Attribute node selector</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pseudo-element">
   <a href="https://www.w3.org/TR/selectors4/#pseudo-element">https://www.w3.org/TR/selectors4/#pseudo-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pseudo-element">2.1. 
Attribute node selector</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-namespaces-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-namespace-prefix" style="color:initial">namespace prefix</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-ident" style="color:initial">&lt;ident></span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SELECTORS4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-originating-element" style="color:initial">originating element</span>
     <li><span class="dfn-paneled" id="term-for-pseudo-element" style="color:initial">pseudo-element</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-namespaces-3">[CSS-NAMESPACES-3]
   <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-namespaces-3/">CSS Namespaces Module Level 3</a>. 20 March 2014. REC. URL: <a href="https://www.w3.org/TR/css-namespaces-3/">https://www.w3.org/TR/css-namespaces-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-selectors4">[SELECTORS4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css3syn">[CSS3SYN]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-selectors-api">[SELECTORS-API]
   <dd>Anne van Kesteren; Lachlan Hunt. <a href="https://www.w3.org/TR/selectors-api/">Selectors API Level 1</a>. 21 February 2013. REC. URL: <a href="https://www.w3.org/TR/selectors-api/">https://www.w3.org/TR/selectors-api/</a>
  </dl>
  <aside class="dfn-panel" data-for="attribute-node-selector">
   <b><a href="#attribute-node-selector">#attribute-node-selector</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attribute-node-selector">2.1. 
Attribute node selector</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-namespace-attr">
   <b><a href="#typedef-namespace-attr">#typedef-namespace-attr</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-namespace-attr">2.1. 
Attribute node selector</a> <a href="#ref-for-typedef-namespace-attr①">(2)</a> <a href="#ref-for-typedef-namespace-attr②">(3)</a> <a href="#ref-for-typedef-namespace-attr③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-na-prefix">
   <b><a href="#typedef-na-prefix">#typedef-na-prefix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-na-prefix">2.1. 
Attribute node selector</a> <a href="#ref-for-typedef-na-prefix①">(2)</a> <a href="#ref-for-typedef-na-prefix②">(3)</a> <a href="#ref-for-typedef-na-prefix③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-na-name">
   <b><a href="#typedef-na-name">#typedef-na-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-na-name">2.1. 
Attribute node selector</a> <a href="#ref-for-typedef-na-name①">(2)</a> <a href="#ref-for-typedef-na-name②">(3)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>